async function defineComponentProps() {
    let compId;
    try {
        compId = VueElement.id;
    } catch (e) {
        compId = "map";
    }
    TempSources.compId = compId;
    const componentProps = {
        "interval": 2,
        "thresholdType": 'interval',
        "thresholdField": 'judge',
        "thresholdLimit": 'value',
        "thresholdEnable": false,
        "thresholdData": [
            {
                "startValue": 0,
                "endValue": 1,
                "color": "rgb(255,0,0)"
            },
            {
                "startValue": 1,
                "endValue": 2,
                "color": "rgb(0,255,0)"
            },
            {
                "startValue": 2,
                "endValue": 3,
                "color": "rgb(0,0,255)"
            }
        ],

        "thresholdNormalData":
            [
                {
                    "value": 1,
                    "color": "rgb(255,0,0)"
                },
                {
                    "value": 2,
                    "color": "rgb(0,255,0)"
                },
                {
                    "value": 3,
                    "color": "rgb(0,0,255)"
                }
            ], // 用于存储固定值的数据



        "tooltipEnable": false,
        "tooltipImageBg": true,
        "tooltipDefaultEnable": true, // 默认地区内的轮播数据
        "tooltipBgColor": 'rgba(23, 189, 237, 0.5)',
        "tooltipFontSize": 16,
        "tooltipData": [],
        "tooltipFontColor": "rgb(255,255,255)",
        "tooltipType": 'default',


        "threeModeEnable": true,
        mapDataInfo: {
            type: "pointAndline"
        },
        // 图层相关判断
        "layerDataCheckEnable": false,
        "layerDataInfo": {
            type: ""
        },
        "layerEnable": true,
        mapLayerData: [],
        echartMapDataInfo: {
            clickEnable: false,
            data: [],
            type: "default",
            style: {
                point: {
                    color: "rgba(0, 206, 209, 1)",
                    type: "default",
                    fontSize: 16,
                    symbolSize: 16,
                    symbol: ""
                },
                line: {
                    width: 2,
                    type: "default",
                    color: "rgba(0, 206, 209, 1)",
                    opacity: 1
                },
                polygon: {
                    borderWidth: 2,
                    type: "default",
                    borderColor: "rgba(0, 206, 209, 1)",
                    fillColor: "rgba(31, 147, 255, 0.73)",
                    opacity: 1
                }
            }
        },

        // 事件开关
        events: [
            {
                "action": "click",
                "enable": false,
                "name": "鼠标点击事件"
            },
            {
                "action": "dblclick",
                "enable": false,
                "name": "鼠标双击事件"
            },
            {
                "action": "mousemove",
                "enable": false,
                "name": "鼠标移动事件"
            },
            {
                "action": "mouseover",
                "enable": false,
                "name": "鼠标移入事件"
            },
            {
                "action": "mouseout",
                "enable": false,
                "name": "鼠标移出事件"
            },
            {
                "action": "mouseup",
                "enable": false,
                "name": "鼠标左键抬起"
            },
            {
                "action": "mousedown",
                "enable": false,
                "name": "鼠标左键按下"
            },
            {
                "action": "globalout",
                "enable": false,
                "name": " 鼠标移出图表区域事件"
            },
            {
                "action": "contextmenu",
                "enable": false,
                "name": " 鼠标右键事件"
            }
        ],

        // mapLayerData: [
        //     {
        //         startPointX: 113.267899,
        //         startPointY: 23.12052,
        //         endPointX: 113.30128,
        //         endPointY: 23.183719,
        //     },
        //     {
        //         startPointX: 113.737164,
        //         startPointY: 23.765557,
        //         endPointX: 113.30128,
        //         endPointY: 23.183719,
        //     },
        //     {
        //         startPointX: 113.488217,
        //         startPointY: 23.184569,
        //         endPointX: 113.30128,
        //         endPointY: 23.183719,
        //     },
        //     {
        //         startPointX: 113.823294,
        //         startPointY: 23.265265,
        //         endPointX: 113.30128,
        //         endPointY: 23.183719,
        //     },
        //     {
        //         startPointX: 113.464942,
        //         startPointY: 22.888164,
        //         endPointX: 113.30128,
        //         endPointY: 23.183719,
        //     },
        //     {
        //         startPointX: 113.212168,
        //         startPointY: 23.24616,
        //         endPointX: 113.30128,
        //         endPointY: 23.183719,
        //     },
        //     {
        //         startPointX: 113.218528,
        //         startPointY: 23.444321,
        //         endPointX: 113.30128,
        //         endPointY: 23.183719,
        //     },
        //     {
        //         startPointX: 113.555581,
        //         startPointY: 22.790071,
        //         endPointX: 113.30128,
        //         endPointY: 23.183719,
        //     },
        //     {
        //         startPointX: 113.276397,
        //         startPointY: 23.086587,
        //         endPointX: 113.30128,
        //         endPointY: 23.183719,
        //     },
        //     {
        //         startPointX: 113.192719,
        //         startPointY: 23.111849,
        //         endPointX: 113.30128,
        //         endPointY: 23.183719,
        //     },
        // ],
    };
    componentProps.mapType = "threeMap"
    componentProps.mapInfo = {
        "dataType": 1,
        "mapName": "广州市",
        "url": "",
        "mapCode": "440100"
    }

    let option = {
        cusWidth: 3,
        backgroundColor: "",
        legend: {
            show: false,
        },
        tooltip: {
            trigger: "item",
        },
        geo3D: {
            show: false,
            map: compId,
            viewControl: {
                beta: 0, //x轴旋转
                alpha: 35, //Y轴旋转
                panMouseButton: "right", //平移操作使用的鼠标按键
                rotateMouseButton: "left", //旋转操作使用的鼠标按键
            },
            // 真实感材质相关配置 shading: 'realistic'时有效
            realisticMaterial: {
                detailTexture: COMP_DIR + "/map/detail.webp", // 纹理贴图
                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
                metalness: 0, // 0材质是非金属 ，1金属
                roughnessAdjust: 0,
            },
            light: {
                main: {
                    color: "#ffffff",
                    intensity: 1,
                    // shadow: false,
                    shadow: true, // 开启阴影
                    shadowQuality: 'ultra', // 阴影质量
                    // 主光源设置
                    //  color: '#ff0000', // 红色光源
                    intensity: 1.2, // 光源强度
                },
                ambient: {
                    // 环境光设置
                    color: '#000000',
                    intensity: 0.1
                }
            },
            itemStyle: {
                // color: "#4D96FA",
                borderWidth: 2,
                borderColor: "#fff",
                //  borderColor:'#9ffcff',
                // shadowColor: 'rgba(0,54,255, 1)',
                shadowBlur: 150,
                opcity: 1,
            },
            shading: "realistic",
            label: {
                show: true,
                fontSize: 14,
                color: "#f9fcff",
                fontWeight: 600,
                fontFamily: "Courier New",
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 16,
                    color: "#f9fcff",
                    fontWeight: 600,
                },
                itemStyle: {
                    // color: "#539efe",
                    borderWidth: 1,
                    borderColor: "#4fdcf7"
                },
            },
            groundPlane: false,
            // 将geo3d放在最底层
            zlevel: -1,
        },
        // geo: {
        //     map: TempSources.compId,
        //     zoom: 1.1,
        //     zIndex: 99,
        //     show: false
        // },
        // 用于经纬度点坐标显示
        geo: {
            map: compId,
            show: false,
            roam: true,
            tooltip: {
                show: true,
                padding: [6, 10],
                backgroundColor: "rgba(255,255,255,.8)",
                borderColor: "#fff",
                borderRadius: "10px",
                textStyle: {
                    align: "left",
                    verticalAlign: "middle",
                    lineHeight: 26,
                    color: "rgba(0,0,0,.7)",
                },
            },
            name: "数据",
            animation: false,
            aspectScale: 1,
            zoom: 0.6,
            zlevel: 2,
            showLegendSymbol: false,
            label: {
                show: true,
                color: "rgba(255,255,255,1)",
                fontSize: 14,
            },
            itemStyle: {
                areaColor: "rgba(0,54,105,1)",
                borderColor: "rgba(63,218,255,.6)",
                borderWidth: 1,
                shadowColor: "rgba(63, 218, 255,0.6)",
                shadowBlur: 35,
                fontSize: 100,
            },
            emphasis: {
                label: {
                    show: true,
                    color: "rgba(255,255,255,1)",
                    fontSize: 10,
                },
                itemStyle: {
                    areaColor: "rgba(255,240,64,.5)",
                    borderColor: "rgba(255,255,255,1)",
                    borderWidth: 1,
                },
            },
            layoutCenter: ["50%", "50%"],
            layoutSize: "160%",
            markPoint: {
                symbol: "none",
            },
        },
        series: [
            {
                tooltip: {
                    show: true,
                    padding: [6, 10],
                    backgroundColor: "rgba(255,255,255,.8)",
                    borderColor: "#fff",
                    borderRadius: "10px",
                    textStyle: {
                        align: "left",
                        verticalAlign: "middle",
                        lineHeight: 26,
                        color: "rgba(0,0,0,.7)",
                    },
                    // data: componentProps.tooltipData
                },
                name: "数据",
                type: "map",
                map: TempSources.compId, // 自定义扩展图表类型
                aspectScale: 1,
                // zoom: 0.6,
                // roam: true,
                zlevel: 3,
                blendMode: "clear",
                zoom: -100, //缩放
                showLegendSymbol: false,
                label: {
                    show: true,
                    color: "rgba(255,255,255,1)",
                    fontSize: 14,
                },
                itemStyle: {
                    // areaColor: "rgba(14,149,241,1)",
                    areaColor: "rgba(0,54,105,1)",
                    // borderColor: "rgba(233,233,233,1)",
                    borderColor: "rgba(63,218,255,.6)",
                    borderWidth: 1,
                    shadowColor: "rgba(63, 218, 255,0.6)",
                    shadowBlur: 35,
                    // shadowColor: "rgba(14,149,241,1)",
                    // borderWidth: 1,
                    // shadowBlur: 22,
                    fontSize: 100
                },
                emphasis: {
                    label: {
                        show: true,
                        color: "rgba(255,255,255,1)",
                        fontSize: 10,
                    },
                    itemStyle: {
                        areaColor: "rgba(255,240,64,.5)",
                        borderColor: "rgba(255,255,255,1)",
                        borderWidth: 1,
                    },
                },
                layoutCenter: ["50%", "50%"],
                layoutSize: "160%",
                markPoint: {
                    symbol: "none",
                },
            },
            {
                type: 'scatter',
                _cione_layer: true,
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                zlevel: 100,
                tooltip: {
                    show: true,
                    padding: [6, 10],
                    backgroundColor: "rgba(255,255,255,.8)",
                    borderColor: "#fff",
                    borderRadius: "10px",
                    textStyle: {
                        align: "left",
                        verticalAlign: "middle",
                        lineHeight: 26,
                        color: "rgba(0,0,0,.7)",
                    },
                    // formatter: function (param) {
                    //     return param.data.popupContent
                    //     // return param.data
                    //     // return getShowTooltipData(param);
                    // }
                },
                rippleEffect: {
                    period: 15,
                    scale: 4,
                    brushType: 'fill'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        offset: [15, 0],
                        color: 'rgba(29,233,182,1)',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(29,233,182,1)',
                        shadowBlur: 10,
                        shadowColor: 'rgba(51,51,3,1)'
                    }
                },
                symbolSize: 12,
                symbol: "", //修改图片
                data: []
            },
            {
                type: "lines",
                _cione_layer: true,
                coordinateSystem: "geo",
                zlevel: 101,
                data: []
            },
            {
                type: "map",
                _cione_layer: true,
                map: "polygonLayer", // 自定义扩展图表类型
                aspectScale: 1,
                zoom: 0.1,
                zlevel: 102,
                showLegendSymbol: false,
                label: {
                    show: true,
                    color: "rgba(255,255,255,1)",
                    fontSize: 14,
                },
                itemStyle: {
                    areaColor: "rgba(31, 147, 255, 0.73)", // 填充色
                    borderWidth: 2, // 边框宽度
                    borderColor: "rgba(0, 206, 209, 1)", // 边框色
                    opacity: 0.5, // 透明度
                },
            },
            // {
            //     type: "effectScatter",
            //     // show: componentProps.layerEnable,
            //     coordinateSystem: "geo",
            //     showEffectOn: "render",
            //     zlevel: 1,
            //     rippleEffect: {
            //         period: 15,
            //         scale: 4,
            //         brushType: "fill",
            //     },
            //     hoverAnimation: true,
            //     label: {
            //         normal: {
            //             formatter: "{b}",
            //             position: "right",
            //             offset: [15, 0],
            //             color: "rgba(29,233,182,1)",
            //             show: true,
            //         },
            //     },
            //     itemStyle: {
            //         normal: {
            //             color: "rgba(29,233,182,1)",
            //             shadowBlur: 10,
            //             shadowColor: "rgba(51,51,3,1)",
            //         },
            //     },
            //     symbolSize: 12,
            //     data: []
            // }, //地图线的动画效果
            // {
            //     type: "lines",
            //     zlevel: 1,
            //     show: componentProps.layerEnable,
            //     effect: {
            //         show: true,
            //         period: 4, //箭头指向速度，值越小速度越快
            //         trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
            //         symbol: "arrow", //箭头图标
            //         symbolSize: 7, //图标大小
            //     },
            //     lineStyle: {
            //         normal: {
            //             color: "rgba(222,155,6,1)",
            //             width: 1, //线条宽度
            //             opacity: 0.1, //尾迹线条透明度
            //             curveness: 0.3, //尾迹线条曲直度
            //         },
            //     },
            //     data: []
            // }
        ],
    };
    // option.series[0].itemStyle.borderWidth = option.cusWidth
    componentProps.options = option;

    /**
       * 用于展示tooltip的数据提示内容
       * @param paramData tooltip数据
       */
    function getShowTooltipData(paramData) {
        // 定义要排除的字段
        const excludeKeys = ['value', 'itemStyle']
        const dataInfo = paramData.data
        // 获取弹窗内容
        const popupContent = getPopupContent(dataInfo, excludeKeys)
        console.log('展示信息', popupContent)
        return popupContent

        // 生成弹窗内容
        function getPopupContent(data, excludeKeys) {
            let popupContent = ''
            for (let key in data) {
                if (!excludeKeys.includes(key)) {
                    popupContent += `<div>${data[key]}</div>`
                    // popupContent += `<div>${key}: ${data[key]}</div>`;
                }
            }
            return popupContent.trim()
        }
    }
    // 返回组件属性, 一定要return
    return componentProps;
}

async function defineComponentBeforeCreated({ VueElement }) { }

// 组件创建后
async function defineComponentCreated({ VueElement, VueInstance }) { }

async function defineComponentDestroy() { }

async function handleDataCallback({ ResourceData, VueInstance }) { }
